What is the difference between inline and block elements?
Difference Between Inline and Block Elements in HTML
In HTML, elements are categorized as either inline or block, which affects how they are rendered on the page and how they interact with surrounding content.
Key Differences
Block Elements:
- Start on a new line and take up the full width available by default.
- Can contain other block or inline elements.
- Examples:
<div>,<p>,<h1>–<h6>,<ul>,<ol>.
- Examples:
Inline Elements:
- Do not start on a new line and only take up as much width as necessary.
- Can only contain text or other inline elements.
- Examples:
<span>,<a>,<strong>,<em>.
- Examples:
Example Usage
In short: Block elements structure the layout by occupying full width and stacking vertically, while inline elements flow within text and only occupy the space their content needs.